import React, { Component } from 'react'
import { SideBar, SearchBar, Card } from 'antd-mobile';
import Header from '../../components/header/header';
import "./Cate.less"
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actions } from '../../store/modules/cate';
import {getList,getCateN,getGoods,getPre} from "../../store/modules/cate"
import Left from './left/left';
import Right from './right/right';

class Cate extends Component {
    componentDidMount(){
        let {Cate:{reqCate,reqGoods}}=this.props;
        //获取left
        reqCate();
        //获取goods
        reqGoods();
    }
    render() {
        let { list, n,Cate:{changeN,changeNum},goods,pre } = this.props
        return (
            <div>
                <Header text="商品分类"></Header>
                {/* 搜索框 */}
                <header>
                    <div>
                        <SearchBar placeholder='请输入内容' />
                        <button>搜索</button>
                    </div>
                </header>
                <content>
                    <Left n={n} list={list} changeN={changeNum}></Left>
                    <Right goods={goods} pre={pre} n={n}></Right>
                </content>
                {/* <content>
                    <SideBar activeKey={n + ""} onChange={(e) => this.changeCate(Number(e))}>
                        {cate.map(item => (
                            <SideBar.Item
                                key={item.id}
                                title={item.catename}
                            />
                        ))}
                    </SideBar>
                    <div>
                        {goods.map((item) => {
                            return (
                                <MyContext.Consumer key={item.id}>
                                    {({ $pre }) => {
                                        return (
                                            <Card title={item.goodsname} onClick={() => { }}>
                                                <img src={$pre + item.img} alt="" width={60} />
                                                <div>
                                                    <p>价格:{item.price}</p>
                                                    <p>原价：{item.market_price}</p>
                                                </div>
                                                <button onClick={() => this.props.history.push("/detail/id=" + item.id)}>加入购物车</button>
                                            </Card>
                                        )
                                    }}
                                </MyContext.Consumer>
                            )
                        })}
                    </div>
                </content> */}
            </div>
        )
    }
}

const mapStateToProps=(state)=>{
    return{
        list:getList(state),
        n:getCateN(state),
        goods:getGoods(state),
        pre:getPre(state)
    }
}
const mapDispatchToProps=(dispatch)=>{
    return{
        Cate:bindActionCreators(actions,dispatch)
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Cate)